接續昨天，弄好連結後進入內頁，要把標題、內容...等的資料顯示在內頁，這邊要使用的是firebase取資料夾中的資料功能，和先前的取資料夾有點像，但這邊是要取資料夾下的某一筆資料。

在開始前一樣要先引入基本的firebase資源(下方是官方文件的寫法)

doc(db, "cities", "SF")中的

• cities : 資料夾
• SF : 檔案id

import { doc, getDoc } from "firebase/firestore";

const docRef = doc(db, "cities", "SF");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Document data:", docSnap.data());
} else {
  console.log("No such document!");
}

套用到我先前建立的文件，postId利用useParams，將url上的id抓下來，將取到的資料傳給post，最後就是把值送到前台畫面。

const [post, setPost] = useState({})
const { postId } = useParams();
const docRef =  doc(db, "post", postId)

getDoc(docRef)
	.then((doc) => {
		if (doc.exists) {
		    const data = doc.data()
		    setPost(data)
		} else {
		    console.log("No such document!");
		}
	}).catch((error) => {
	    console.log("Error getting document:", error);
	});
}

這邊是完整的code

import { useParams, useNavigate } from "react-router-dom";
import { db } from "../utils/firebase";
import { doc, getDoc } from "firebase/firestore";
import { useEffect, useState } from "react";
function Post(){
    const [post, setPost] = useState({})
    const { postId } = useParams();
    const navigate = useNavigate();
    const docRef =  doc(db, "post", postId)
    useEffect(()=>{
        getDoc(docRef).then((doc) => {
            if (doc.exists) {
                const data = doc.data()
                setPost(data)
            } else {
                console.log("No such document!");
            }
        }).catch((error) => {
            console.log("Error getting document:", error);
        });
        }
    ,[])
    return(
    <main data-page="1" className="postPage">
        <section className="banner_section">
            <div className="container">
                <div className="newstitle">
                    <div className="newstitle_row">
                        <div className="newstitle_date">
                            { post.dateRange?.map((date)=>{
                                return <div key={date.seconds}>
                                    {new Date(date.seconds* 1000).toLocaleDateString("zh-TW")}
                                </div>
                            })}
                        </div>
                        <a className="newstitle_tag" href="#">{post.continent}</a>
                    </div>
                    <h1 className="newstitle_main">
                        {post.title}
                    </h1>
                </div>
            </div>
        </section>
        <section className="editor_section">
            <div className="container">
                <div className="editor_content animatable fadeInUp">
                {post.content}
                </div>
                <div className="btnwrap animatable fadeInUp">
                    <a className="btn blue" href="#" onClick={() => navigate(-1)}>BACK <span></span></a>
                </div>
            </div>
        </section>
    </main>)
}

export default Post

今日有卡住的地方是post.dateRange這筆資料，用與列表頁的方式寫會出現**map() is not a function**，後來查到的解法(參考)就是加一個?，先確認值是否存在在執行，錯誤就會消失拉~